<template>
	<AdminLayout activeKey="analytics" :breadcrumbs="['首页','数据分析']" tabTitle="数据分析">
		<view class="analytics-page">
			<!-- 顶部工具栏 -->
			<view class="toolbar">
				<view class="toolbar-left">
					<view class="page-header">
						<text class="page-title">运营数据看板</text>
						<text class="page-subtitle">实时监控平台运营情况与风险指标</text>
					</view>
				</view>
				<view class="toolbar-right">
					<picker mode="date" fields="month" @change="onMonthChange" class="date-picker">
						<view class="picker-btn">
							<text class="iconfont icon-riqi"></text>
							<text class="picker-text">{{ month || '全部月份' }}</text>
						</view>
				</picker>
					<button class="refresh-btn" @click="loadAllData">
						<text class="iconfont icon-shuaxin"></text>
						<text>刷新数据</text>
					</button>
				</view>
			</view>

			<!-- 核心指标卡片 -->
			<view class="overview-cards">
				<view class="metric-card" v-for="(metric, index) in overviewMetrics" :key="index">
					<view class="metric-icon" :style="{ background: metric.color }">
						<text class="iconfont" :class="metric.icon"></text>
					</view>
					<view class="metric-content">
						<view class="metric-value">{{ metric.value }}</view>
						<view class="metric-label">{{ metric.label }}</view>
						<view class="metric-trend" :class="{ positive: metric.trend > 0, negative: metric.trend < 0 }">
							<text class="trend-icon">{{ metric.trend > 0 ? '↗' : metric.trend < 0 ? '↘' : '→' }}</text>
							<text class="trend-text">{{ Math.abs(metric.trend) }}%</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 数据分析区域 -->
			<view class="analytics-grid">
				<!-- 用户数据分析 -->
				<view class="chart-panel">
					<view class="panel-header">
						<view class="panel-title">
							<text class="iconfont icon-yonghu panel-icon"></text>
							<text>用户数据分析</text>
						</view>
						<view class="panel-tabs">
							<text class="tab-item" :class="{ active: userActiveTab === 'growth' }" @click="switchUserTab('growth')">用户增长</text>
							<text class="tab-item" :class="{ active: userActiveTab === 'active' }" @click="switchUserTab('active')">活跃度</text>
						</view>
					</view>
					<view class="chart-container">
						<qiun-data-charts 
							type="line" 
							:opts="userChartOpts" 
							:chartData="userChartData"
							:ontouch="true"
							:canvas2d="true"
							:background="'transparent'"
						/>
					</view>
					<view class="chart-stats">
						<view class="stat-item">
							<text class="stat-label">总用户数</text>
							<text class="stat-value">{{ userStats.total }}</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">本月新增</text>
							<text class="stat-value">{{ userStats.monthlyNew }}</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">活跃用户</text>
							<text class="stat-value">{{ userStats.active }}</text>
						</view>
					</view>
				</view>

				<!-- 任务数据分析 -->
				<view class="chart-panel">
					<view class="panel-header">
						<view class="panel-title">
							<text class="iconfont icon-renwu panel-icon"></text>
							<text>任务数据分析</text>
						</view>
						<view class="panel-tabs">
							<text class="tab-item" :class="{ active: taskActiveTab === 'volume' }" @click="switchTaskTab('volume')">发布量</text>
							<text class="tab-item" :class="{ active: taskActiveTab === 'completion' }" @click="switchTaskTab('completion')">完成率</text>
							<text class="tab-item" :class="{ active: taskActiveTab === 'category' }" @click="switchTaskTab('category')">分类</text>
						</view>
					</view>
					<view class="chart-container">
						<qiun-data-charts 
							type="column" 
							:opts="taskChartOpts" 
							:chartData="taskChartData"
							:ontouch="true"
							:canvas2d="true"
							:background="'transparent'"
						/>
					</view>
					<view class="chart-stats">
						<view class="stat-item">
							<text class="stat-label">总任务数</text>
							<text class="stat-value">{{ taskStats.total }}</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">已完成</text>
							<text class="stat-value">{{ taskStats.completed }}</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">完成率</text>
							<text class="stat-value">{{ taskStats.completionRate }}%</text>
						</view>
					</view>
				</view>

				<!-- 交易数据分析 -->
				<view class="chart-panel">
					<view class="panel-header">
						<view class="panel-title">
							<text class="iconfont icon-jiaoyi panel-icon"></text>
							<text>交易数据分析</text>
						</view>
						<view class="panel-tabs">
							<text class="tab-item" :class="{ active: tradeActiveTab === 'amount' }" @click="switchTradeTab('amount')">交易额</text>
							<text class="tab-item" :class="{ active: tradeActiveTab === 'volume' }" @click="switchTradeTab('volume')">交易量</text>
							<text class="tab-item" :class="{ active: tradeActiveTab === 'habit' }" @click="switchTradeTab('habit')">消费习惯</text>
						</view>
					</view>
					<view class="chart-container">
						<qiun-data-charts 
							type="area" 
							:opts="tradeChartOpts" 
							:chartData="tradeChartData"
							:ontouch="true"
							:canvas2d="true"
							:background="'transparent'"
						/>
					</view>
					<view class="chart-stats">
						<view class="stat-item">
							<text class="stat-label">总交易额</text>
							<text class="stat-value">¥{{ tradeStats.totalAmount }}</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">交易笔数</text>
							<text class="stat-value">{{ tradeStats.totalCount }}</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">平均客单</text>
							<text class="stat-value">¥{{ tradeStats.avgAmount }}</text>
						</view>
					</view>
				</view>

				<!-- 风险监控面板 -->
				<view class="risk-panel">
					<view class="panel-header">
						<view class="panel-title">
							<text class="iconfont icon-jinggao panel-icon risk-icon"></text>
							<text>风险数据监控</text>
						</view>
						<view class="risk-level" :class="riskLevel.class">
							<text class="risk-dot"></text>
							<text class="risk-text">{{ riskLevel.text }}</text>
						</view>
					</view>
					
					<view class="risk-metrics">
						<view class="risk-metric-card">
							<view class="risk-metric-header">
								<text class="risk-metric-title">高违约率任务类型</text>
								<text class="risk-metric-count">{{ riskData.highDefaultTasks.length }}</text>
							</view>
							<view class="risk-list">
								<view class="risk-item" v-for="item in riskData.highDefaultTasks" :key="item.type">
									<text class="risk-item-name">{{ item.type }}</text>
									<text class="risk-item-rate">{{ item.rate }}%</text>
								</view>
							</view>
						</view>

						<view class="risk-metric-card">
							<view class="risk-metric-header">
								<text class="risk-metric-title">频繁违规用户</text>
								<text class="risk-metric-count">{{ riskData.violationUsers.length }}</text>
							</view>
							<view class="risk-list">
								<view class="risk-item" v-for="user in riskData.violationUsers" :key="user.id">
									<text class="risk-item-name">{{ user.nickname }}</text>
									<text class="risk-item-count">{{ user.violationCount }}次</text>
								</view>
							</view>
			</view>

						<view class="risk-metric-card">
							<view class="risk-metric-header">
								<text class="risk-metric-title">异常交易监控</text>
								<text class="risk-metric-count">{{ riskData.abnormalTransactions.length }}</text>
							</view>
							<view class="risk-list">
								<view class="risk-item" v-for="transaction in riskData.abnormalTransactions" :key="transaction.id">
									<text class="risk-item-name">{{ transaction.description }}</text>
									<text class="risk-item-level" :class="transaction.level">{{ transaction.levelText }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</AdminLayout>
</template>

<script>
import AdminLayout from '@/components/AdminLayout.vue'

export default {
	components: { 
		AdminLayout
	},
	data() {
		return {
			month: '',
			loading: false,
			
			// 核心指标数据
			overviewMetrics: [
				{ label: '总用户数', value: '0', trend: 0, color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', icon: 'icon-yonghu' },
				{ label: '活跃任务', value: '0', trend: 0, color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', icon: 'icon-renwu' },
				{ label: '交易金额', value: '¥0', trend: 0, color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', icon: 'icon-jiaoyi' },
				{ label: '风险指数', value: '低', trend: 0, color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', icon: 'icon-anquan' }
			],
			
			// 用户数据
			userActiveTab: 'growth',
			userStats: {
				total: 0,
				monthlyNew: 0,
				active: 0
			},
			userChartData: [],
			
			// 任务数据
			taskActiveTab: 'volume',
			taskStats: {
				total: 0,
				completed: 0,
				completionRate: 0
			},
			taskChartData: [],
			
			// 交易数据
			tradeActiveTab: 'amount',
			tradeStats: {
				totalAmount: '0.00',
				totalCount: 0,
				avgAmount: '0.00'
			},
			tradeChartData: [],
			
			// 风险数据
			riskLevel: {
				text: '低风险',
				class: 'low'
			},
			riskData: {
				highDefaultTasks: [],
				violationUsers: [],
				abnormalTransactions: []
			},
			
			// 图表配置选项
			userChartOpts: {},
			taskChartOpts: {},
			tradeChartOpts: {}
		}
	},
	
	onReady() {
		this.loadAllData()
	},
	
	mounted() {
		this.initChartOpts()
	},
	
	
	methods: {
		onMonthChange(e) {
			this.month = e.detail.value
			this.loadAllData()
		},
		
		// 切换用户图表tab
		switchUserTab(tab) {
			this.userActiveTab = tab
			this.updateUserChartData()
		},
		
		// 切换任务图表tab
		switchTaskTab(tab) {
			this.taskActiveTab = tab
			this.updateTaskChartData()
		},
		
		// 切换交易图表tab
		switchTradeTab(tab) {
			this.tradeActiveTab = tab
			this.updateTradeChartData()
		},
		
		async loadAllData() {
			this.loading = true
			try {
				await Promise.all([
					this.loadUserData(),
					this.loadTaskData(),
					this.loadTradeData(),
					this.loadRiskData()
				])
				this.updateOverviewMetrics()
				this.updateAllChartData()
			} catch (error) {
				console.error('加载数据失败:', error)
				uni.showToast({
					title: '数据加载失败',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},
		//用户数据
		async loadUserData() {
			// 直接使用模拟数据显示图表
			this.userStats = { 
				total: 15847, 
				monthlyNew: 1850, 
				active: 9200 
			}
			this.userChartData = [
				{ date: '15', count: 12000 },
				{ date: '16', count: 12800 },
				{ date: '17', count: 13200 },
				{ date: '18', count: 14100 },
				{ date: '19', count: 14800 },
				{ date: '20', count: 15200 },
				{ date: '21', count: 15847 }
			]
		},
		//任务数据
		async loadTaskData() {
			// 直接使用模拟数据显示图表
			this.taskStats = { 
				total: 2100, 
				completed: 1680, 
				completionRate: 80 
			}
			this.taskChartData = [
				{ date: '15', published: 180, completed: 145 },
				{ date: '16', published: 220, completed: 185 },
				{ date: '17', published: 160, completed: 120 },
				{ date: '18', published: 240, completed: 200 },
				{ date: '19', published: 200, completed: 165 },
				{ date: '20', published: 280, completed: 235 },
				{ date: '21', published: 320, completed: 275 }
			]
		},
		//交易数据
		async loadTradeData() {
			// 直接使用模拟数据显示图表
			this.tradeStats = {
				totalAmount: '185,600.00',
				totalCount: 1247,
				avgAmount: '148.80'
			}
			this.tradeChartData = [
				{ date: '15', amount: 15800, count: 120 },
				{ date: '16', amount: 22400, count: 145 },
				{ date: '17', amount: 18600, count: 128 },
				{ date: '18', amount: 28900, count: 168 },
				{ date: '19', amount: 25300, count: 152 },
				{ date: '20', amount: 32100, count: 189 },
				{ date: '21', amount: 36500, count: 205 }
			]
		},
		
		async loadRiskData() {
			// 直接使用模拟数据显示风险监控
			this.riskData = {
				highDefaultTasks: [
					{ type: '代购服务', rate: 15.2 },
					{ type: '学习辅导', rate: 8.7 },
					{ type: '技术服务', rate: 6.3 },
					{ type: '生活服务', rate: 4.1 }
				],
				violationUsers: [
					{ id: 1, nickname: '用户***123', violationCount: 5 },
					{ id: 2, nickname: '用户***456', violationCount: 4 },
					{ id: 3, nickname: '用户***789', violationCount: 3 },
					{ id: 4, nickname: '用户***012', violationCount: 2 }
				],
				abnormalTransactions: [
					{ id: 1, description: '短时间大量低价发布', level: 'high', levelText: '高风险' },
					{ id: 2, description: '异常退款申请', level: 'medium', levelText: '中风险' },
					{ id: 3, description: '可疑账户关联', level: 'low', levelText: '低风险' },
					{ id: 4, description: '重复任务发布', level: 'medium', levelText: '中风险' }
				]
			}
			// 计算风险等级
			const highRiskCount = this.riskData.abnormalTransactions.filter(t => t.level === 'high').length
			if (highRiskCount > 2) {
				this.riskLevel = { text: '高风险', class: 'high' }
			} else if (highRiskCount > 0) {
				this.riskLevel = { text: '中风险', class: 'medium' }
			} else {
				this.riskLevel = { text: '低风险', class: 'low' }
			}
		},
		
		
		updateOverviewMetrics() {
			this.overviewMetrics[0].value = this.userStats.total.toLocaleString()
			this.overviewMetrics[0].trend = 12.5
			
			this.overviewMetrics[1].value = this.taskStats.total.toLocaleString()
			this.overviewMetrics[1].trend = 8.3
			
			this.overviewMetrics[2].value = `¥${this.tradeStats.totalAmount}`
			this.overviewMetrics[2].trend = 15.7
			
			this.overviewMetrics[3].value = this.riskLevel.text
			this.overviewMetrics[3].trend = -2.1
		},
		
		// 初始化图表配置选项
		initChartOpts() {
			this.userChartOpts = {
				color: ["#667eea", "#764ba2"],
				padding: [15, 15, 0, 15],
				dataLabel: false,
				dataPointShape: true,
				dataPointShapeType: "solid",
				extra: {
					line: {
						type: "curve",
						width: 3,
						activeType: "hollow"
					},
					area: {
						type: "curve",
						opacity: 0.3,
						addLine: true,
						width: 3,
						gradient: true
					}
				}
			}
			
			this.taskChartOpts = {
				color: ["#f093fb", "#4facfe"],
				padding: [15, 15, 0, 15],
				dataLabel: true,
				extra: {
					column: {
						type: "group",
						width: 30,
						activeBgColor: "#000000",
						activeBgOpacity: 0.08,
						borderRadius: 8
					}
				}
			}
			
			this.tradeChartOpts = {
				color: ["#4facfe", "#00f2fe"],
				padding: [15, 15, 0, 15],
				dataLabel: false,
				dataPointShape: true,
				dataPointShapeType: "solid",
				extra: {
					area: {
						type: "curve",
						opacity: 0.3,
						addLine: true,
						width: 3,
						gradient: true
					}
				}
			}
		},
		
		// 更新用户图表数据
		updateUserChartData() {
			this.userChartData = {
				categories: this.userChartData.map(item => `09-${item.date}`),
				series: [{
					name: this.userActiveTab === 'growth' ? '用户增长' : '活跃用户',
					data: this.userChartData.map(item => item.count)
				}]
			}
		},
		
		// ECharts任务统计柱状图
		drawTaskChart() {
			if (!this.taskChartInstance || !this.taskChartData.length) return
			
			const option = {
				title: {
					text: '任务发布与完成统计',
					left: 'center',
					textStyle: {
						fontSize: 16,
						color: '#2d3748',
						fontWeight: 600
					}
				},
				tooltip: {
					trigger: 'axis',
					backgroundColor: 'rgba(255, 255, 255, 0.95)',
					borderColor: '#e2e8f0',
					borderWidth: 1,
					textStyle: {
						color: '#2d3748'
					}
				},
				legend: {
					data: ['发布', '完成'],
					top: '12%',
					right: '10%',
					textStyle: {
						color: '#2d3748',
						fontSize: 12
					}
				},
				grid: {
					left: '5%',
					right: '5%',
					top: '20%',
					bottom: '10%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					data: this.taskChartData.map(item => `09-${item.date}`),
					axisLine: {
						lineStyle: {
							color: '#e2e8f0'
						}
					},
					axisLabel: {
						color: '#718096',
						fontSize: 12
					}
				},
				yAxis: {
					type: 'value',
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						color: '#718096',
						fontSize: 12
					},
					splitLine: {
						lineStyle: {
							color: '#f7fafc',
							type: 'dashed'
						}
					}
				},
				series: [
					{
						name: '发布',
						type: 'bar',
						data: this.taskChartData.map(item => item.published),
						itemStyle: {
							color: {
								type: 'linear',
								x: 0, y: 0, x2: 0, y2: 1,
								colorStops: [
									{ offset: 0, color: '#f093fb' },
									{ offset: 1, color: '#f5576c' }
								]
							}
						},
						barWidth: '35%'
					},
					{
						name: '完成',
						type: 'bar',
						data: this.taskChartData.map(item => item.completed),
						itemStyle: {
							color: {
								type: 'linear',
								x: 0, y: 0, x2: 0, y2: 1,
								colorStops: [
									{ offset: 0, color: '#4facfe' },
									{ offset: 1, color: '#00f2fe' }
								]
							}
						},
						barWidth: '35%'
					}
				]
			}
			
			this.taskChartInstance.setOption(option, true)
		},
		
		// ECharts交易数据线图
		drawTradeChart() {
			if (!this.tradeChartInstance || !this.tradeChartData.length) return
			
			const option = {
				title: {
					text: '交易数据趋势',
					left: 'center',
					textStyle: {
						fontSize: 16,
						color: '#2d3748',
						fontWeight: 600
					}
				},
				tooltip: {
					trigger: 'axis',
					backgroundColor: 'rgba(255, 255, 255, 0.95)',
					borderColor: '#e2e8f0',
					borderWidth: 1,
					textStyle: {
						color: '#2d3748'
					},
					formatter: (params) => {
						const data = params[0]
						return `<div style="padding: 8px;">
							<div style="margin-bottom: 4px; font-weight: 600;">2024-09-${data.name}</div>
							<div style="display: flex; align-items: center;">
								<div style="width: 10px; height: 10px; background: ${data.color}; border-radius: 50%; margin-right: 8px;"></div>
								<span>交易额: ¥${data.value.toLocaleString()}</span>
							</div>
						</div>`
					}
				},
				grid: {
					left: '5%',
					right: '5%',
					top: '15%',
					bottom: '10%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					data: this.tradeChartData.map(item => item.date),
					axisLine: {
						lineStyle: {
							color: '#e2e8f0'
						}
					},
					axisLabel: {
						color: '#718096',
						fontSize: 12
					}
				},
				yAxis: {
					type: 'value',
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						color: '#718096',
						fontSize: 12,
						formatter: (value) => {
							return value >= 1000 ? `¥${(value/1000).toFixed(1)}k` : `¥${value}`
						}
					},
					splitLine: {
						lineStyle: {
							color: '#f7fafc',
							type: 'dashed'
						}
					}
				},
				series: [{
					type: 'line',
					data: this.tradeChartData.map(item => item.amount),
					smooth: true,
					symbol: 'circle',
					symbolSize: 6,
					lineStyle: {
						color: '#4facfe',
						width: 3
					},
					itemStyle: {
						color: '#4facfe',
						borderColor: '#fff',
						borderWidth: 2
					},
					areaStyle: {
						color: {
							type: 'linear',
							x: 0, y: 0, x2: 0, y2: 1,
							colorStops: [
								{ offset: 0, color: 'rgba(79, 172, 254, 0.3)' },
								{ offset: 1, color: 'rgba(79, 172, 254, 0.05)' }
							]
						}
					}
				}]
			}
			
			this.tradeChartInstance.setOption(option, true)
		},
		
	}
}
</script>

<style scoped>
/* 引入阿里图标字体 */
@import url('@/static/fonts/iconfont.css');

/* 主容器 */
.analytics-page {
	padding: 32rpx;
	background: #f8fafc;
	min-height: calc(100vh - 100rpx);
}

/* 顶部工具栏 */
.toolbar {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 40rpx;
	padding: 32rpx;
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
}

.toolbar-left .page-header {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.page-title {
	font-size: 48rpx;
	font-weight: 700;
	color: #1a202c;
	line-height: 1.2;
}

.page-subtitle {
	font-size: 28rpx;
	color: #718096;
	line-height: 1.4;
}

.toolbar-right {
	display: flex;
	align-items: center;
	gap: 24rpx;
}

.date-picker {
	cursor: pointer;
}

.picker-btn {
	display: flex;
	align-items: center;
	gap: 12rpx;
	padding: 16rpx 24rpx;
	background: #f7fafc;
	border: 2rpx solid #e2e8f0;
	border-radius: 16rpx;
	transition: all 0.3s ease;
	min-width: 200rpx;
	justify-content: center;
}

.picker-btn:hover {
	background: #edf2f7;
	border-color: #cbd5e0;
}

.picker-btn .iconfont {
	font-size: 28rpx;
	color: #4a5568;
}

.picker-text {
	font-size: 28rpx;
	color: #2d3748;
	font-weight: 500;
}

.refresh-btn {
	display: flex;
	align-items: center;
	gap: 12rpx;
	padding: 16rpx 32rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	border: none;
	border-radius: 16rpx;
	font-size: 28rpx;
	font-weight: 600;
	transition: all 0.3s ease;
	box-shadow: 0 4rpx 15rpx rgba(102, 126, 234, 0.4);
}

.refresh-btn:hover {
	transform: translateY(-2rpx);
	box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.5);
}

.refresh-btn .iconfont {
	font-size: 28rpx;
}

/* 核心指标卡片 */
.overview-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300rpx, 1fr));
	gap: 32rpx;
	margin-bottom: 40rpx;
}

.metric-card {
	display: flex;
	align-items: center;
	gap: 24rpx;
	padding: 32rpx;
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.metric-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6rpx;
	background: var(--card-color, #667eea);
}

.metric-card:hover {
	transform: translateY(-4rpx);
	box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
}

.metric-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.metric-icon .iconfont {
	font-size: 40rpx;
	color: #fff;
}

.metric-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.metric-value {
	font-size: 48rpx;
	font-weight: 700;
	color: #1a202c;
	line-height: 1.2;
}

.metric-label {
	font-size: 28rpx;
	color: #718096;
	font-weight: 500;
}

.metric-trend {
	display: flex;
	align-items: center;
	gap: 8rpx;
	font-size: 24rpx;
	font-weight: 600;
}

.metric-trend.positive {
	color: #38a169;
}

.metric-trend.negative {
	color: #e53e3e;
}

.trend-icon {
	font-size: 28rpx;
}

/* 数据分析网格 */
.analytics-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(600rpx, 1fr));
	gap: 32rpx;
	margin-bottom: 40rpx;
	align-items: start;
}

/* 图表面板 */
.chart-panel {
	background: #fff;
	border-radius: 20rpx;
	overflow: visible;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
	transition: all 0.3s ease;
	position: relative;
	z-index: 1;
	min-height: 680rpx;
}

.chart-panel:hover {
	box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
}

.panel-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx;
	border-bottom: 2rpx solid #f7fafc;
}

.panel-title {
	display: flex;
	align-items: center;
	gap: 16rpx;
	font-size: 32rpx;
	font-weight: 600;
	color: #2d3748;
}

.panel-icon {
	font-size: 36rpx;
	color: #667eea;
}

.panel-tabs {
	display: flex;
	gap: 8rpx;
	background: #f7fafc;
	padding: 6rpx;
	border-radius: 12rpx;
}

.tab-item {
	padding: 12rpx 24rpx;
	font-size: 26rpx;
	font-weight: 500;
	color: #718096;
	border-radius: 8rpx;
	cursor: pointer;
	transition: all 0.3s ease;
}

.tab-item.active {
	background: #fff;
	color: #667eea;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.chart-container {
	/* background-color: pink; */
	padding: 20rpx;
	height: 480rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: visible;
}

.chart-canvas {
	width: 100%;
	height: 100%;
	background: transparent;
	display: block;
	margin: 0 auto;
}

.echarts-container {
	width: 100%;
	height: 100%;
	min-height: 380px;
}

.chart-stats {
	display: flex;
	justify-content: space-around;
	padding: 24rpx 32rpx 32rpx;
	border-top: 2rpx solid #f7fafc;
}

.stat-item {
	text-align: center;
}

.stat-label {
	display: block;
	font-size: 24rpx;
	color: #718096;
	margin-bottom: 8rpx;
}

.stat-value {
	display: block;
	font-size: 32rpx;
	font-weight: 700;
	color: #2d3748;
}

/* 风险监控面板 */
.risk-panel {
	grid-column: 1 / -1;
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
	border: 2rpx solid #fed7d7;
}

.risk-panel .panel-header {
	background: linear-gradient(135deg, #feb2b2 0%, #fed7d7 100%);
}

.risk-icon {
	color: #e53e3e !important;
}

.risk-level {
	display: flex;
	align-items: center;
	gap: 12rpx;
	padding: 12rpx 20rpx;
	border-radius: 12rpx;
	font-size: 26rpx;
	font-weight: 600;
}

.risk-level.low {
	background: #c6f6d5;
	color: #276749;
}

.risk-level.medium {
	background: #fef5e7;
	color: #b7791f;
}

.risk-level.high {
	background: #fed7d7;
	color: #c53030;
}

.risk-dot {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
	background: currentColor;
}

.risk-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400rpx, 1fr));
	gap: 32rpx;
	padding: 32rpx;
}

.risk-metric-card {
	padding: 24rpx;
	background: #fafafa;
	border-radius: 16rpx;
	border: 2rpx solid #f0f0f0;
}

.risk-metric-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.risk-metric-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #2d3748;
}

.risk-metric-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40rpx;
	height: 40rpx;
	padding: 0 12rpx;
	background: #e53e3e;
	color: #fff;
	font-size: 24rpx;
	font-weight: 700;
	border-radius: 20rpx;
}

.risk-list {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.risk-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16rpx 20rpx;
	background: #fff;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.risk-item-name {
	font-size: 26rpx;
	color: #2d3748;
	font-weight: 500;
}

.risk-item-rate,
.risk-item-count {
	font-size: 24rpx;
	font-weight: 600;
	color: #e53e3e;
}

.risk-item-level {
	padding: 6rpx 12rpx;
	border-radius: 8rpx;
	font-size: 22rpx;
	font-weight: 600;
}

.risk-item-level.high {
	background: #fed7d7;
	color: #c53030;
}

.risk-item-level.medium {
	background: #fef5e7;
	color: #b7791f;
}

.risk-item-level.low {
	background: #c6f6d5;
	color: #276749;
}


/* 响应式设计 */
@media (max-width: 1200px) {
	.analytics-grid {
		grid-template-columns: 1fr;
	}
	
	.risk-metrics {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.analytics-page {
		padding: 24rpx;
	}
	
	.toolbar {
		flex-direction: column;
		gap: 24rpx;
		align-items: stretch;
	}
	
	.toolbar-right {
		justify-content: space-between;
	}
	
	.overview-cards {
		grid-template-columns: 1fr;
	}
	
	.report-actions {
		flex-direction: column;
	}
	
	.report-btn {
		justify-content: center;
	}
}

/* 动画效果 */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.metric-card,
.chart-panel,
.risk-panel,
.report-section {
	animation: fadeInUp 0.6s ease-out;
}

.metric-card:nth-child(1) { animation-delay: 0.1s; }
.metric-card:nth-child(2) { animation-delay: 0.2s; }
.metric-card:nth-child(3) { animation-delay: 0.3s; }
.metric-card:nth-child(4) { animation-delay: 0.4s; }

/* 加载状态 */
.loading {
	opacity: 0.7;
	pointer-events: none;
}

/* 图表容器优化 */
.chart-container {
	position: relative;
	background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.chart-canvas {
	border-radius: 12rpx;
}
</style> 